<template>
  <div>
    <div class="sc-message">
      <div class="sc-message--content"
           :class="{sent: message.author === 'me', received: message.author !== 'me'}">
        <div class="sc-message--avatar" :style="{
          // backgroundImage: `url(${this.chatIcon})`
          backgroundImage: message.author === 'me'?`url(${this.kehuIcon})`:`url(${this.chatIcon})`
        }"></div>
        <TextMessage v-if="message.type === 'text'" :data="message.data" />
        <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
        <FileMessage v-else-if="message.type === 'file'" :data="message.data" />
      </div>
    </div>
    <p v-if="message.author === 'them'" style="text-align:center;position:relative;top:-20px;color:#9fc6ee;font-size: 12px;">
      Is this answer helpful or not?
      <el-radio v-model="radio" label="1" @click.native="isHelp('0')">Yes</el-radio>
      <el-radio v-model="radio" label="2" style="position:relative;left:-20px;" @click.native="isHelp('1')">No</el-radio>
    </p>
  </div>
</template>

<script>
import TextMessage from './TextMessage.vue'
import FileMessage from './FileMessage.vue'
import EmojiMessage from './EmojiMessage.vue'
// import chatIcon from './assets/chat-icon.svg'
import kehuIcon from './assets/kehu.svg'
import chatIcon from './assets/robot.svg'

export default {
  data () {
    return {
      kehuIcon,
      chatIcon,
      messages: '',
      radio: '',
      checkList: []
    }
  },
  components: {
    TextMessage,
    FileMessage,
    EmojiMessage
  },
  watch: {
  },
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  methods: {
    isHelp (value) {
      this.axios.post('http://10.122.33.95:5003/ishelp', {
        'question': this.message.data.text,
        'isOk': value
      })
      this.message.author = ''
    }
  },
  mounted () {
    console.log(this.message, 'mess')
  }
}
</script>
<style lang="scss" scoped>
.sc-message {
  /*width: 300px;*/
  /*margin: auto;*/
  margin: 0 20px;
  padding-bottom: 10px;
  display: flex;
  position:relative;
}

.sc-message--content {
  width: 100%;
  display: flex;
}

.sc-message--content.sent {
  justify-content: flex-end;
}

.sc-message--content.sent .sc-message--avatar {
  /*display: none;*/
}

.sc-message--avatar {
  background-image: url(https://d13yacurqjgara.cloudfront.net/assets/avatar-default-aa2eab7684294781f93bc99ad394a0eb3249c5768c21390163c9f55ea8ef83a4.gif);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  align-self: center;
  margin-right: 10px;
}

.sc-message--meta {
  font-size: xx-small;
  margin-bottom: -10px;
  color: white;
  text-align: center;
}

@media (max-width: 450px) {
  .sc-message {
    width: 80%;
  }
}

.sc-message--text {
  padding: 17px 20px;
  border-radius: 6px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  -webkit-font-smoothing: subpixel-antialiased
}
.sc-message--content.sent{
  .sc-message--text {
    color: #263238;
    /*background-color: #4e8cff;*/
    /*background: linear-gradient(to right, #3d62f2 , #913af6);*/
    background: #ecf3f9;
    max-width: calc(100% - 120px);
    word-wrap: break-word;
    position: relative;
    right: 50px;
  }
  .sc-message--text:after{
    display:inline-block;
    content: '';
    width:0;
    height:0;
    border-width:5px 0 5px 5px;
    border-style:solid;
    border-color:transparent transparent transparent #ecf3f9;
    position:relative;
    left: 25px;
    top: -5px;
  }
  .sc-message--avatar{
    position:absolute;
    right:0;
  }
}

.sc-message--content.received{
  margin-top: 20px;
  .sc-message--text {
    color: #263238;
    background-color: #fff;
  }
  .sc-message--text:before{
    display:inline-block;
    content: '';
    width:0;
    height:0;
    border-width:5px 5px 5px 0;
    border-style:solid;
    border-color:transparent #fff transparent transparent;
    position:relative;
    left: -25px;
    top: -5px;
  }
}
</style>
